<template>
  <div class="plugin">
    <el-card class="hobbyList_card" :class="flag? 'active':''">
      <div class="header"
           v-for="(item,index) in state"
           :key="index"
      >
        <el-row :gutter="20">
          <el-col
              :span="2"
              class="text"
          >
            <div class="hobbyList_name">{{ item.label }}:</div>
          </el-col>
          <el-col
              :span="22"
              class="text_comtents"
          >
            <div
                v-for="choice in item.choises"
                :key="choice.id"
                :class="choice.isChecked?'success':''"
                @click="changeColor(choice)"
            > {{ choice.name }}
            </div>
          </el-col>
        </el-row>

      </div>
      <div class="reset-button" @click="clickReset">重置</div>
      <p class="show">
                <span style="cursor: pointer;" @click="toggle">
                    {{ flag ? '收起' : '展示全部' }}
                </span>
      </p>
    </el-card>

  </div>

</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: 'selector',

});
</script>

<script lang="ts" setup>
import {onMounted, computed, ref} from "vue";
import type {getFilterListModel} from "@/apis/course/course-cs/model/index"
import {getFilterListRequest} from "@/apis/course/course-cs/index"
import {useRoute, useRouter} from "vue-router";
import {reqMyHobby, reqRecommend} from "@/apis/source";
import {getFilterItemModel, getFilterListType} from "@/apis/course/course-cs/model/index";

const route = useRoute();
const router = useRouter();

//我的兴趣列表pageSize
const selector_pageSize = ref<number>(20)
//我的兴趣列表pageNum
const selector_pageNum = ref<number>(0)
//我的兴趣列表
const selectorList = ref<getFilterListType>([])

const video = ref<any>(null)
//pageSize
const pageSize = ref<number>(20)
//pageNum
const pageNum = ref<number>(0)
onMounted(() => {
  //发送请求
  getFilterList();
  mySelectorList();
  getVideoList();
});

//1,定义一个进去后获取列表的请求
const viewList = ref<any>([]);

//发送请求函数
const getFilterList = async () => {
  const re = await getFilterListRequest(pageSize.value, pageNum.value);
  viewList.value = re
};

//点击展开
const flag = ref<boolean>(false)
const toggle = () => {
  flag.value = !flag.value
}

const state = computed(() => { // computed 计算属性
  if (!flag.value) {
    return selectorList.value.slice(0, 2)
  }
  return selectorList.value
})
console.log('state', state.value)

//获取我的列表标签
const mySelectorList = async () => {
  const res = await getFilterListRequest(selector_pageSize.value, selector_pageNum.value)
  // console.log('res',res)
  res.forEach((item: any) => {
    item.choises.forEach((choice: any) => choice.isChecked = false)
  })
  selectorList.value = [...selectorList.value, ...res]
  // console.log('selectorList',selectorList.value)

}

const getVideoList = async () => {
  const res = await reqRecommend(pageSize.value, pageNum.value)
  video.value = res
}
//点击tag标签切换颜色
const changeColor = (item: getFilterItemModel) => {
  item.isChecked = !item.isChecked
  // console.log('切换颜色',item.isChecked)
}
//点击重置
const clickReset = () => {
  state.value.forEach((item: any) => {
    item.choises.forEach((choice: any) => choice.isChecked = false)
  })
}



</script>

<style scoped lang="scss">
/*兴趣列表*/
.plugin {
  position: relative;
  background-color: #f5f7f9;

  .reset-button {
    position: absolute;
    right: 195px;
    top: 28px;
    cursor: pointer;
    font-size: 14px;
    color: #f93684;
    //display: none;
  }
}

.hobbyList_card {
  width: 1200px;

  margin: 10px auto 10px;
  //padding: 16px 10px;
  font-size: 14px;

  .success {
    background-color: #f93684;
    color: #fff;
  }
}

.active {
  height: 450px;
}


.text {
  display: flex;
  flex-wrap: wrap;
  color: #b1b5c1;
  padding: 7px 0;

  .hobbyList_name {
    margin-top: -6px;
    padding: 6px;
  }
}


.text_comtents {
  width: 100px;
  margin-bottom: 10px;
  color: #7D8090;
  display: flex;
  flex-wrap: wrap;

}

.text_comtents div {

  padding: 7px 13px;
  margin: 0 24px 10px 0px;

  border-radius: 4px;
  cursor: pointer;
}

.show {
  text-align: center;
  color: red;
  font-size: 14px;
  margin: 0 auto;
  position: absolute;
  bottom: 10px;
  left: 750px;
}

</style>
